<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        /*-------------es6中支持了class、extend、constructor等面向对象的关键字---------------*/
        class Person{
            n; // 姓名
            age;
            #score = 100; // 带#号的是私有属性，不能通过对象.属性名获取，只能通过get方法获取值

            constructor(name, age, score){ // 构造方法
                this.n = name
                this.age = age
                this.#score = score
            }

            get name() {
                return this.n
            }
            set name(name) {
                this.n = name
            }

            get age() {
                return this.age
            }
            set age(age) {
                this.age = age
            }

            get score() {
                return this.#score
            }
            set score(score) {
                this.#score = score
            }
        }

        class Student extends Person{
            course

            constructor(name, age, score, course){
                super(name, age, score)
                this.course = course
            }
        }



        let test = function() {
            let person = new Person('zhangsan', 11, 88)
            person.n = 'xiaoqiang'
            person.age = 2
            person.score = 99
            console.log(`打印person整个对象: ${person}`)
            console.log(`打印名称n: ${person.n}`)
            console.log(`打印名称n: ${person.name}`)
            console.log(`打印名称n: ${person.age}`)
            // console.log(`打印私有属性: ${person.#score}`)
            console.log(`打印私有属性分数: ${person.score}`)
            
        }

        let test2 = function() {
            let student = new Student("hh", 2, 44, '数学')
            console.log(`姓名: ${student.n}, 年龄: ${student.age}, 分数: ${student.score}, 科目: ${student.course}`)
        }

        let student = new Student()
    </script>
</head>
<body>
    <button onclick="test()">对象语法糖Person</button>
    <button onclick="test2()">对象语法糖Student</button>
</body>
</html>